// import logo from './logo.svg';
import './App.css';
import { useRef, useEffect, useState } from "react"; // 确保这里导入了 useRef 和 useEffect
import { Modal ,Image } from 'antd';
function App() {


  function generateCalendar(year) {
    const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
    const daysInMonth = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
    if ((year % 4 === 0 && year % 100 !== 0) || (year % 400 === 0)) {
      daysInMonth[1] = 29;
    }
    let startDate = new Date(year, 0, 1);
    while (startDate.getDay() !== 1) {
      startDate.setDate(startDate.getDate() - 1);
    }
    const calendar = [];
    let weekNumber = 1;
    for (let i = 0; i < 12; i++) {
      const month = months[i];
      const weekList = [];
      const endOfMonth = new Date(year, i + 1, 0);
      const currentDate = new Date(startDate.toString());
      while (currentDate <= endOfMonth) {
        const weekStart = `${currentDate.getMonth() + 1}/${currentDate.getDate()}/${currentDate.getFullYear()}`;
        const endDate = new Date(currentDate.toString());
        endDate.setDate(endDate.getDate() + 6);
        const weekEnd = `${endDate.getMonth() + 1}/${endDate.getDate()}/${endDate.getFullYear()}`;
        weekList.push({
          week: `w${weekNumber}`,
          weekStart,
          weekEnd
        });
        currentDate.setDate(currentDate.getDate() + 7);
        weekNumber++;
      }
      calendar.push({
        month,
        weekList
      });
      startDate = currentDate;
    }
    return calendar;
  }
  // 获取当前年份
  const currentYear = new Date().getFullYear();
  const generatedCalendar = generateCalendar(currentYear);
  console.log(generatedCalendar);
  // 活动数据
  const activelist = [
    {
      topTitle: "Consumer-Yingru",
      topTitleBg: '#bf0101',
      contentText: 'Chinese Luner New Year',
      active: [
        {
          activeTitle: 'Common Moments',
          activeBgColor: '#000000',
          sartTime: "2025/1/20",
          endTime: "2025/1/27",
          allDept: [{
            activeName: "Holidays",
            bgColor: "#d5dce4",
          },
          {
            activeName: "Seassonal Activities",
            bgColor: "#e2d2f0",
          },
          ],
          activeList: [
            {
              id: 1,
              title: "New Year",
              topTitle: "Consumer-Yingru",
              period: '2',
              startTime: "2025/1/6",
              endTime: "2025/1/12",
              activeTitle: 'Common Moments',
              bgColor: "#d8dff2",
              template: 1,
              departments: [
                { activeName: "Holidays", value: "xxxxxxxxxxxxxxxxx" },
                { activeName: "Seassonal Activities", value: "xxxxxxxxxxxxxxxxx" }
              ],

            },
        
            {
              id: 3,
              title: "Valentine's Day",
              startTime: "2025/12/20",
              endTime: "2025/12/30",
              bgColor: "#e2d2f0",
              activeTitle: 'Common Moments',
              topTitle: "Consumer-Yingru",
              period: '2',
              template: 1,
              departments: [
                { activeName: "Holidays", value: "xxxxxxxxxxxxxxxxx" },
                { activeName: "Seassonal Activities", value: "xxxxxxxxxxxxxxxxx" }
              ],
              isHidden: true,
            },

          ],
        },

      ]
    },
    {
      topTitle: "Brand Marketing - Chariotte",
      topTitleBg: '#bf0101',
      contentText: 'CNY',
      active: [
        {
          activeTitle: 'Common Moments',
          activeBgColor: '#000000',
          sartTime: "2025/1/20",
          endTime: "2025/1/27",

          allDept: [{
            activeName: "Fashionista",
            bgColor: "#d5dce4",
          },
          {
            activeName: "Urban Elite",
            bgColor: "#f2f2f2",
          },
          {
            activeName: "Urban Savry",
            bgColor: "#acb9c9",
          },
          {
            activeName: "Active Youth",
            bgColor: "#c8dac0",
          },
          {
            activeName: "Career Rookie",
            bgColor: "#fdfffe",
          },
          {
            activeName: "Runnerista",
            bgColor: "#c20001",
          },

          ],
          activeList: [
         
            {
              id: 2,
              title: "Back to School",
              startTime: "2025/2/10",
              endTime: "2025/2/24",
              bgColor: "#e2d2f0",
              activeTitle: 'Common Moments',
              template: 2,
              departments: [
                { activeName: "Fashionista", value: "xxxxxxxxxxxxxxxxx" },
                { activeName: "Urban Elite", value: "xxxxxxxxxxxxxxxxx" },
                { activeName: "Urban Savry", value: "xxxxxxxxxxxxxxxxx" },
                { activeName: "Active Youth", value: "xxxxxxxxxxxxxxxxx" },
                { activeName: "Career Rookie", value: "xxxxxxxxxxxxxxxxx" },
                { activeName: "Runnerista", value: "xxxxxxxxxxxxxxxxx" },

              ],
              topTitle: "Brand Marketing - Chariotte",
              period: '2',
            },
         
            {
              id: 7,
              title: "Valentine's Day",
              startTime: "2025/12/20",
              endTime: "2025/12/30",
              topTitle: "Brand Marketing - Chariotte",
              period: '2',
              bgColor: "#e2d2f0",
              activeTitle: 'Common Moments',
              isHidden: true,
              template: 2,
              departments: [
                { activeName: "Fashionista", value: "xxxxxxxxxxxxxxxxx" },
                { activeName: "Urban Elite", value: "xxxxxxxxxxxxxxxxx" },
                { activeName: "Urban Savry", value: "xxxxxxxxxxxxxxxxx" },
                { activeName: "Active Youth", value: "xxxxxxxxxxxxxxxxx" },
                { activeName: "Career Rookie", value: "xxxxxxxxxxxxxxxxx" },
                { activeName: "Runnerista", value: "xxxxxxxxxxxxxxxxx" },

              ],
            },
          ],
        },

      ]
    },
    {
      topTitle: "Brand Marketing",
      topTitleBg: '#bf0101',
      contentText: 'CNY',
      active: [
        {
          activeTitle: 'Lifestyle',
          activeBgColor: '#000000',
          sartTime: "2025/1/20",
          endTime: "2025/1/27",

          allDept: [{
            activeName: "Event/Moment",
            bgColor: "#d5dce4",
          },
          {
            activeName: "Target Consumer",
            bgColor: "#f2f2f2",
          },
          {
            activeName: "Featured Moments",
            bgColor: "#acb9c9",
          },
          {
            activeName: "PD-FTW",
            bgColor: "#c8dac0",
          },
          {
            activeName: "PD-APP",
            bgColor: "#fdfffe",
          },
          {
            activeName: "arketing Support",
            bgColor: "#4473c5",
          },
     
     

          ],
          activeList: [
    
       
            {
              id: 9,
              title: "Valentine's Day",
              startTime: "2025/12/20",
              endTime: "2025/12/30",
              topTitle: "Brand Marketing",
              period: '2',
              bgColor: "#e2d2f0",
              activeTitle: 'Common Moments',
              isHidden: true,
              template: 2,
              departments: [
                { activeName: "Fashionista", value: "xxxxxxxxxxxxxxxxx" },
                { activeName: "Urban Elite", value: "xxxxxxxxxxxxxxxxx" },
                { activeName: "Urban Savry", value: "xxxxxxxxxxxxxxxxx" },
                { activeName: "Active Youth", value: "xxxxxxxxxxxxxxxxx" },
                { activeName: "Career Rookie", value: "xxxxxxxxxxxxxxxxx" },
                { activeName: "Runnerista", value: "xxxxxxxxxxxxxxxxx" },

              ],
            },
          ],
        },

      ]
    },
    {
      topTitle: "Energy Marketing",
      topTitleBg: '#bf0101',
      contentText: 'CNY',
      active: [
        {
          activeTitle: 'Energy',
          activeBgColor: '#000000',
          sartTime: "2025/1/20",
          endTime: "2025/1/27",

          allDept: [{
            activeName: "Pjoject Name",
            bgColor: "#d9d9d9",
          },
          {
            activeName: "Order Qty",
            bgColor: "#d9d9d9",
          },
          {
            activeName: "Traget Consumer",
            bgColor: "#d9d9d9",
          },
          {
            activeName: "SKETING sUPPORT",
            bgColor: "#d9d9d9",
          },
          {
            activeName: "Key Campagin",
            bgColor: "#d9d9d9",
          },
          {
            activeName: "App",
            bgColor: "#d9d9d9",
          },
          {
            activeName: "FTW",
            bgColor: "#d9d9d9",
          },
          {
            activeName: "Others",
            bgColor: "#d9d9d9",
          },
     

          ],
          activeList: [
            {
              id: 1,
              title: "Back to Office",
              startTime: "2025/1/6",
              endTime: "2025/1/22",
              activeTitle: 'Common Moments',
              bgColor: "#d8dff2",
              template: 2,
              departments: [
                { activeName: "Fashionista", value: "xxxxxxxxxxxxxxxxx" },
                { activeName: "Urban Elite", value: "xxxxxxxxxxxxxxxxx" },
                { activeName: "Urban Savry", value: "xxxxxxxxxxxxxxxxx" },
                { activeName: "Active Youth", value: "xxxxxxxxxxxxxxxxx" },
                { activeName: "Career Rookie", value: "xxxxxxxxxxxxxxxxx" },
                { activeName: "Runnerista", value: "xxxxxxxxxxxxxxxxx" },

              ],
              topTitle: "Brand Marketing",
              period: '2',
            },
 
            {
              id: 9,
              title: "Valentine's Day",
              startTime: "2025/12/20",
              endTime: "2025/12/30",
              topTitle: "Brand Marketing",
              period: '2',
              bgColor: "#e2d2f0",
              activeTitle: 'Common Moments',
              isHidden: true,
              template: 2,
              departments: [
                { activeName: "Fashionista", value: "xxxxxxxxxxxxxxxxx" },
                { activeName: "Urban Elite", value: "xxxxxxxxxxxxxxxxx" },
                { activeName: "Urban Savry", value: "xxxxxxxxxxxxxxxxx" },
                { activeName: "Active Youth", value: "xxxxxxxxxxxxxxxxx" },
                { activeName: "Career Rookie", value: "xxxxxxxxxxxxxxxxx" },
                { activeName: "Runnerista", value: "xxxxxxxxxxxxxxxxx" },

              ],
            },
          ],
        },

      ]
    },
    {
      topTitle: "Retail Marketing",
      topTitleBg: '#bf0101',
      contentText: 'CNY',
      active: [
        {
          activeTitle: 'E-Commerce',
          activeBgColor: '#000000',
          sartTime: "2025/1/20",
          endTime: "2025/1/27",

          allDept: [{
            activeName: "Pjoject Name",
            bgColor: "#d5dce4",
          },
          {
            activeName: "Order Qty",
            bgColor: "#f2f2f2",
          },
          {
            activeName: "Traget Consumer",
            bgColor: "#acb9c9",
          },
          {
            activeName: "SKETING sUPPORT",
            bgColor: "#c8dac0",
          },
          {
            activeName: "Key Campagin",
            bgColor: "#fdfffe",
          },
          {
            activeName: "App",
            bgColor: "#fdfffe",
          },
          {
            activeName: "FTW",
            bgColor: "#fdfffe",
          },
          {
            activeName: "Others",
            bgColor: "#fdfffe",
          },
     

          ],
          activeList: [
          
            {
              id: 9,
              title: "Valentine's Day",
              startTime: "2025/12/20",
              endTime: "2025/12/30",
              topTitle: "Brand Marketing",
              period: '2',
              bgColor: "#e2d2f0",
              activeTitle: 'Common Moments',
              isHidden: true,
              template: 2,
              departments: [
                { activeName: "Fashionista", value: "xxxxxxxxxxxxxxxxx" },
                { activeName: "Urban Elite", value: "xxxxxxxxxxxxxxxxx" },
                { activeName: "Urban Savry", value: "xxxxxxxxxxxxxxxxx" },
                { activeName: "Active Youth", value: "xxxxxxxxxxxxxxxxx" },
                { activeName: "Career Rookie", value: "xxxxxxxxxxxxxxxxx" },
                { activeName: "Runnerista", value: "xxxxxxxxxxxxxxxxx" },

              ],
            },
          ],
        },

      ]
    },

  ]


  // 将日期字符串转换为 Date 对象
  function parseDate(dateStr) {
    const [month, day, year] = dateStr.split("/");
    const timestamp = new Date(year, month - 1, day).getTime();
    if (isNaN(timestamp)) {
      throw new Error(`无效的日期格式: ${dateStr}`);
    }
    return timestamp;
  }
  function hamdTime(str) {
    const parts = str.split('/');
    // 重新组织日期格式
    const newStr = `${parts[1]}/${parts[2]}/${parts[0]}`;
    return newStr
  }
  // 查找符合条件的 week 数据
  function findWeek(data, startTime, isCutNum = true) {
    const start = parseDate(hamdTime(startTime));
    for (const monthData of data) {
      for (const week of monthData.weekList) {
        const weekStart = parseDate(week.weekStart);
        const weekEnd = parseDate(week.weekEnd);
        // 判断 startTime 是否在当前时间段内
        if (start >= weekStart && start <= weekEnd) {
          // 提取 week 数字部分
          const weekNumber = week.week.replace("w", "");
          let num = isCutNum ? -1 : 0
          return parseInt(weekNumber, 10) + num // 转换为数字
        }
      }
    }
    return null;
  }
  const calenderRef = useRef(null);
  const contentRefs = useRef(activelist);
  const handleSyncScroll = (e) => {
    const scrollLeft = e.target.scrollLeft;

    // 遍历所有 conent-right 元素，同步滚动
    contentRefs.current.forEach((ref) => {
      if (ref && ref !== e.target) {
        ref.scrollLeft = scrollLeft;
      }
    });

    if (calenderRef.current && calenderRef.current !== e.target) {
      calenderRef.current.scrollLeft = scrollLeft;
    }
  };

  useEffect(() => {

  }, []);




  const [isModalOpen, setIsModalOpen] = useState(false);

  const [activeItem, setActive] = useState([])

  const showModal = (item, index) => {
    console.log('234', item)
    setActive([item])
    setIsModalOpen(true);
  };

  const handleOk = () => {
    setIsModalOpen(false);
  };

  const handleCancel = () => {
    setIsModalOpen(false);
  };



  return (
    <div className='home-page'>
      <div className='page-container'> 
      <div className='calendar-current'>   
      <img
    width={24}
    src="/LOGO.png"
  />
               NBC 2025 Calendar</div>
      <div className='top-bar'>Q1</div>
      <div className='top-container'>
        {/* 左上角 */}
        <div className="home-time">
          <div className='left-container'>
            <div>NBC 2025 Calendar</div>
            <div>Owner:Shicai</div>
            <div>Ver1.</div>
            <div>1/6/2025</div>
          </div>
          <div className='month-top'>
            <div>Month</div>
            <div>Week</div>
            <div>Week Start</div>
            <div>Week End</div>
          </div>
        </div>
        {/* 日历 */}
        <div className="calender" ref={calenderRef} onScroll={handleSyncScroll}>
          <div className="calender-container"  >
            {generatedCalendar.map((monthData, index) => (
              <div key={index} className='calender-one'>
                <div className='month'>{monthData.month}</div>
                <div className='flex-row'>
                  {monthData.weekList.map((week, weekIndex) => (
                    <div className='week' key={weekIndex}>{week.week}</div>
                  ))}
                </div>
                <div className='flex-row'>
                  {monthData.weekList.map((week, weekIndex) => (
                    <div className='week-start' key={weekIndex}>{week.weekStart}</div>
                  ))}
                </div>
                <div className='flex-row'>
                  {monthData.weekList.map((week, weekIndex) => (
                    <div className='week-end' key={weekIndex}>{week.weekEnd}</div>
                  ))}
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
      {/* 中间 */}
      <div className='content-continer'>
        {activelist.map((item, index) => (
          <div key={index} className='content-one'>
            {/* 活动-line */}
            <div className='dept-line' style={{ backgroundColor: item.topTitleBg }}>{item.topTitle}</div>
            {/* 活动content */}
            {item.active.map((data, i) => (
              <div key={i} className='flex-row'>
                <div className='conent-left' >
                  <div className='left-container' style={{ backgroundColor: data.activeBgColor }}>{data.activeTitle}</div>
                  <div className='right-container'>
                    {data.allDept.map((deptObj, deptIndex) => (
                      <div className='bar-one' key={deptIndex} style={{ backgroundColor: deptObj.bgColor }}>
                        {deptObj.activeName}
                      </div>
                    ))}
                  </div>
                </div>
                <div className='conent-right' ref={(el) => (contentRefs.current[index] = el)} // 动态添加 ref
                  onScroll={handleSyncScroll}>
                  <div className="activity-container" >
                    {data.activeList.sort((a, b) => new Date(a.startTime) - new Date(b.startTime)).map((activity, dataINdex) => {
                      // 找到所有参与部门的索引
                      const deptIndices = activity.departments.map(dept => data.allDept.indexOf(dept));
                      // 向左偏移量
                      const leftOffset = findWeek(generatedCalendar, activity.startTime);
                      const endOffset = findWeek(generatedCalendar, activity.endTime, false);
                      const divWidth = endOffset - leftOffset === 0 ? 1 : endOffset - leftOffset
                      // 找到最小的索引（即最近的部门）
                      const firstDeptIndex = Math.min(...deptIndices) < 0 ? 0 : Math.min(...deptIndices)

                      // 判断是否是最后一个元素
                      const isLast = dataINdex === data.activeList.length - 1;
                      return activity.template === 1 ? (

                        <div
                          key={activity.id}
                          className='content-title'
                          onClick={() => showModal(activity)}

                          style={{
                            top: `${firstDeptIndex * 20}px`,
                            left: `${leftOffset * 130}px`,
                            width: `${divWidth * 130}px`,
                            height: `20px`,
                            backgroundColor: activity.bgColor,
                            opacity: isLast ? 0 : 1, // 如果是最后一个元素，则设置透明度为0
                          }}
                        >
                          <div className="activity-header"  >{activity.title}</div>
                        </div>
                      ) : (

                        <div
                          key={activity.id}
                          className='content-title'
                          onClick={() => showModal(activity)}

                          style={{
                            top: `${firstDeptIndex * 20}px`,
                            left: `${leftOffset * 130}px`,
                            width: `${divWidth * 130}px`,
                            height: `${ deptIndices.length* 18}px`,
                            backgroundColor: "#fff",
                            opacity: isLast ? 0 : 1, // 如果是最后一个元素，则设置透明度为0
                          }}

                        >
                          <div className="activity-header-2" style={{ backgroundColor: "#4473c5" }}   >{activity.title}</div>
                          <div>

                            Runnerista (Female), Urban Runner (Female)
                            Shanghai: Cloud Nine
                          </div>
                        </div>
                      );
                    })}


                  </div>

                </div>
              </div>
            ))}

          </div>
        ))}
      </div>

      {
        isModalOpen && <Modal title="Detailed content" footer={null} mask={false} open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
          {activeItem.map((item, index) => (
            <div className="panel" key={index}>
              <div className="info-section">
                <div className="info-item">
                  <span className="icon-circle">🕒</span>
                  <span className="label">Week Start:</span>
                  <span className="value">{item.startTime}</span> {/* 直接访问 startTime 属性 */}
                </div>
                <div className="info-item">
                  <span className="icon-circle">🕒</span>
                  <span className="label">Week End:</span>
                  <span className="value">{item.endTime}</span>
                </div>
                <div className="info-item">
                  <span className="icon-clock">⏰</span>
                  <span className="label">Period:</span>
                  <span className="value">{item.period} days</span>
                </div>
                <div className="info-item">
                  <span className="icon-department">💼</span>
                  <span className="label">Department:</span>
                  <span className="value">{item.topTitle}</span>
                </div>
                <div className="info-item">
                  <span className="icon-event">📅</span>
                  <span className="label">Event:</span>
                  <span className="value">{item.activeTitle}</span>
                </div>
              </div>

              <div className="details-section">

                <ul className="details-list" >
                  {item.departments.map((data, dataIndex) => {
                    return (
                      <li key={dataIndex}><span className='detail-li'>{data.activeName}:</span> {data.value}</li>
                    )
                  })}

                </ul>
              </div>
            </div>
          ))}


        </Modal>
      }
      </div>
   
    </div >
  );
}
export default App;






















// import React from "react";
// import "./App.css";

// const activities = [
//   {
//     id: 1,
//     title: "New Year",
//     startTime: "2025/1/6",
//     endTime: "2025/1/12",
//     departments: ["Holidays"],
//   },
//   {
//     id: 2,
//     title: "Valentine's Day",
//     startTime: "2025/2/10",
//     endTime: "2025/2/14",
//     departments: ["Holidays", "Seasenal Actioies"],
//   },
//   {
//     id: 3,
//     title: "Chinese Lunar New Year",
//     startTime: "2025/1/20",
//     endTime: "2025/1/26",
//     departments: ["Fashiontion", "uthksd"],
//   },
//   {
//     id: 4,
//     title: "Summer Festival",
//     startTime: "2025/7/15",
//     endTime: "2025/7/20",
//     departments: ["Fashiontion", "uthksd", "部门二"],
//   },
// ];

// function App() {
//   // 提取所有部门（去重并排序）
//   const allDepartments = Array.from(
//     new Set(activities.flatMap((activity) => activity.departments))
//   ).sort();

//   // 每个部门的高度（固定值）
//   const departmentHeight = 30;

//   return (
//     <div className="container">
//       {/* 左侧：部门列表 */}
//       <div className="department-list">
//         {allDepartments.map((dept, index) => (
//           <div
//             key={index}
//             className="department-item"
//             style={{ height: `${departmentHeight}px`, lineHeight: `${departmentHeight}px` }}
//           >
//             {dept}
//           </div>
//         ))}
//       </div>

//       {/* 右侧：活动内容 */}
//       <div className="activity-container">
//         {activities.sort((a, b) => new Date(a.startTime) - new Date(b.startTime)).map((activity) => {
//           // 找到所有参与部门的索引
//           const deptIndices = activity.departments.map(dept => allDepartments.indexOf(dept));
//           // 找到最小的索引（即最近的部门）
//           const firstDeptIndex = Math.min(...deptIndices);
//           // 找到最后一个索引（即最远的部门）
//           const lastDeptIndex = Math.max(...deptIndices);
//           // 计算活动的高度和顶部位置
//           const activityHeight = (lastDeptIndex - firstDeptIndex + 1) * departmentHeight;
//           return (
//             <div
//               key={activity.id}
//               className="activity-column"
//               style={{
//                 top: `${firstDeptIndex * departmentHeight}px`,
//                 height: `${activityHeight}px`,
//               }}
//             >
//               <div className="activity-header">{activity.title}</div>
//             </div>
//           );
//         })}
//       </div>
//     </div>
//   );
// }

// export default App;




// import React, { useRef, useMemo } from "react";

// const SyncHorizontalScroll = ({ count = 3, data = [] }) => {
//   // 1. 创建动态 refs 数组（存储所有滚动容器的引用）
//   const containerRefs = useRef([]);
//   const memoizedContainerRefs = useMemo(() => {
//     return Array.from({ length: count }, () => React.createRef());
//   }, [count]);

//   containerRefs.current = memoizedContainerRefs;

//   // 2. 同步滚动回调
//   const handleScroll = (e) => {
//     const { scrollLeft } = e.target;

//     // 遍历所有容器，更新滚动位置（忽略当前触发滚动的容器以避免递归）
//     containerRefs.current.forEach((ref) => {
//       if (ref.current && ref.current !== e.target) {
//         ref.current.scrollLeft = scrollLeft;
//       }
//     });
//   };

//   // 3. 要渲染的数据（默认示例数据）
//   const items = data.length > 0 ? data : Array.from({ length: 10 }, (_, i) => i + 1);

//   return (
//     <div style={{ display: "flex", flexDirection: "column", gap: "20px" }}>
//       {/* 动态生成 N 个同步滚动的 div */}
//       {containerRefs.current.map((ref, index) => (
//         <div
//           key={`scroll-container-${index}`}
//           ref={ref}
//           onScroll={handleScroll}
//           style={{
//             width: "400px", // 可自定义宽度
//             height: "120px", // 可自定义高度
//             overflowX: "auto",
//             overflowY: "hidden",
//             whiteSpace: "nowrap",
//             border: "1px solid #ccc",
//             padding: "10px",
//           }}
//         >
//           {/* 横向滚动的子元素 */}
//           {items.map((item) => (
//             <div
//               key={`item-${item}`}
//               style={{
//                 display: "inline-block",
//                 width: "100px",
//                 height: "100px",
//                 backgroundColor: "#f0f0f0",
//                 marginRight: "10px",
//                 textAlign: "center",
//                 lineHeight: "100px",
//               }}
//             >
//               {item}
//             </div>
//           ))}
//         </div>
//       ))}
//     </div>
//   );
// };

// export default SyncHorizontalScroll;